<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="优惠名称" prop="orderCouponName">

        <el-input

          v-model="queryParams.orderCouponName"

          placeholder="请输入优惠名称"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="优惠类型" prop="couponType">

        <el-select v-model="queryParams.couponType" placeholder="请选择优惠类型" clearable size="small">

          <el-option

            v-for="dict in couponTypeOptions"

            :key="dict.dictValue"

            :label="dict.dictLabel"

            :value="dict.dictValue"

          />

        </el-select>

      </el-form-item>

      <el-form-item label="满金额" prop="totalAmount">

        <el-input

          v-model="queryParams.totalAmount"

          placeholder="请输入满金额"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="优惠金额" prop="coupon">

        <el-input

          v-model="queryParams.coupon"

          placeholder="请输入优惠金额"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item>

        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>

    </el-form>



    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">

        <el-button

          type="primary"

          icon="el-icon-plus"

          size="mini"

          @click="handleAdd"

          v-hasPermi="['simple:coupon:add']"

        >新增</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="success"

          icon="el-icon-edit"

          size="mini"

          :disabled="single"

          @click="handleUpdate"

          v-hasPermi="['simple:coupon:edit']"

        >修改</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="danger"

          icon="el-icon-delete"

          size="mini"

          :disabled="multiple"

          @click="handleDelete"

          v-hasPermi="['simple:coupon:remove']"

        >删除</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="warning"

          icon="el-icon-download"

          size="mini"

          @click="handleExport"

          v-hasPermi="['simple:coupon:export']"

        >导出</el-button>

      </el-col>

    </el-row>



    <el-table v-loading="loading" :data="couponList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="订单优惠" align="center" prop="orderCouponId" />

      <el-table-column label="优惠名称" align="center" prop="orderCouponName" />

      <el-table-column label="优惠类型" align="center" prop="couponType" :formatter="couponTypeFormat" />

      <el-table-column label="满金额" align="center" prop="totalAmount" />

      <el-table-column label="优惠金额" align="center" prop="coupon" />

      <el-table-column label="备注" align="center" prop="remark" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

        <template slot-scope="scope">

          <el-button

            size="mini"

            type="text"

            icon="el-icon-edit"

            @click="handleUpdate(scope.row)"

            v-hasPermi="['simple:coupon:edit']"

          >修改</el-button>

          <el-button

            size="mini"

            type="text"

            icon="el-icon-delete"

            @click="handleDelete(scope.row)"

            v-hasPermi="['simple:coupon:remove']"

          >删除</el-button>

        </template>

      </el-table-column>

    </el-table>



    <pagination

      v-show="total>0"

      :total="total"

      :page.sync="queryParams.pageNum"

      :limit.sync="queryParams.pageSize"

      @pagination="getList"

    />



    <!-- 添加或修改订单优惠对话框 -->

    <el-dialog :title="title" :visible.sync="open" width="500px">

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="优惠名称" prop="orderCouponName">

          <el-input v-model="form.orderCouponName" placeholder="请输入优惠名称" />

        </el-form-item>

        <el-form-item label="优惠类型">

          <el-select v-model="form.couponType" placeholder="请选择优惠类型">

            <el-option

              v-for="dict in couponTypeOptions"

              :key="dict.dictValue"

              :label="dict.dictLabel"

              :value="dict.dictValue"

            ></el-option>

          </el-select>

        </el-form-item>

        <el-form-item label="满金额" prop="totalAmount">

          <el-input v-model="form.totalAmount" placeholder="请输入满金额" />

        </el-form-item>

        <el-form-item label="优惠金额" prop="coupon">

          <el-input v-model="form.coupon" placeholder="请输入优惠金额" />

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>

      </div>

    </el-dialog>

  </div>

</template>



<script>

  import { listCoupon, getCoupon, delCoupon, addCoupon, updateCoupon, exportCoupon } from "@/api/simple/coupon";



  export default {

    data() {

      return {

        // 遮罩层

        loading: true,

        // 选中数组

        ids: [],

        // 非单个禁用

        single: true,

        // 非多个禁用

        multiple: true,

        // 总条数

        total: 0,

        // 订单优惠表格数据

        couponList: [],

        // 弹出层标题

        title: "",

        // 是否显示弹出层

        open: false,

        // 优惠类型字典

        couponTypeOptions: [],

        // 查询参数

        queryParams: {

          pageNum: 1,

          pageSize: 10,

          orderCouponName: undefined,

          couponType: undefined,

          totalAmount: undefined,

          coupon: undefined,

        },

        // 表单参数

        form: {},

        // 表单校验

        rules: {

          orderCouponName: [

            { required: true, message: "优惠名称不能为空", trigger: "blur" }

          ],        couponType: [

            { required: true, message: "优惠类型不能为空", trigger: "blur" }

          ],        totalAmount: [

            { required: true, message: "满金额不能为空", trigger: "blur" }

          ],        coupon: [

            { required: true, message: "优惠金额不能为空", trigger: "blur" }

          ],      }

      };

    },

    created() {

      this.getList();

      this.getDicts("order_coupon").then(response => {

        this.couponTypeOptions = response.data;

      });

    },

    methods: {

      /** 查询订单优惠列表 */

      getList() {

        this.loading = true;

        listCoupon(this.queryParams).then(response => {

          this.couponList = response.rows;

          this.total = response.total;

          this.loading = false;

        });

      },

      // 优惠类型字典翻译

      couponTypeFormat(row, column) {

        return this.selectDictLabel(this.couponTypeOptions, row.couponType);

      },

      // 取消按钮

      cancel() {

        this.open = false;

        this.reset();

      },

      // 表单重置

      reset() {

        this.form = {

          orderCouponId: undefined,

          orderCouponName: undefined,

          couponType: undefined,

          totalAmount: undefined,

          coupon: undefined,

          delFlag: undefined,

          createBy: undefined,

          createTime: undefined,

          updateBy: undefined,

          updateTime: undefined,

          remark: undefined

        };

        this.resetForm("form");

      },

      /** 搜索按钮操作 */

      handleQuery() {

        this.queryParams.pageNum = 1;

        this.getList();

      },

      /** 重置按钮操作 */

      resetQuery() {

        this.resetForm("queryForm");

        this.handleQuery();

      },

      // 多选框选中数据

      handleSelectionChange(selection) {

        this.ids = selection.map(item => item.orderCouponId)

        this.single = selection.length!=1

        this.multiple = !selection.length

      },

      /** 新增按钮操作 */

      handleAdd() {

        this.reset();

        this.open = true;

        this.title = "添加订单优惠";

      },

      /** 修改按钮操作 */

      handleUpdate(row) {

        this.reset();

        const orderCouponId = row.orderCouponId || this.ids

        getCoupon(orderCouponId).then(response => {

          this.form = response.data;

          this.open = true;

          this.title = "修改订单优惠";

        });

      },

      /** 提交按钮 */

      submitForm: function() {

        this.$refs["form"].validate(valid => {

          if (valid) {

            if (this.form.orderCouponId != undefined) {

              updateCoupon(this.form).then(response => {

                if (response.code === 200) {

                  this.msgSuccess("修改成功");

                  this.open = false;

                  this.getList();

                } else {

                  this.msgError(response.msg);

                }

              });

            } else {

              addCoupon(this.form).then(response => {

                if (response.code === 200) {

                  this.msgSuccess("新增成功");

                  this.open = false;

                  this.getList();

                } else {

                  this.msgError(response.msg);

                }

              });

            }

          }

        });

      },

      /** 删除按钮操作 */

      handleDelete(row) {

        const orderCouponIds = row.orderCouponId || this.ids;

        this.$confirm('是否确认删除订单优惠编号为"' + orderCouponIds + '"的数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return delCoupon(orderCouponIds);

        }).then(() => {

          this.getList();

          this.msgSuccess("删除成功");

        }).catch(function() {});

      },

      /** 导出按钮操作 */

      handleExport() {

        const queryParams = this.queryParams;

        this.$confirm('是否确认导出所有订单优惠数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return exportCoupon(queryParams);

        }).then(response => {

          this.download(response.msg);

        }).catch(function() {});

      }

    }

  };

</script>
